<template>
	<div class="navMenu">
		<template v-for="navMenu in navMenus" :key="navMenu.id" >
      <el-menu-item v-if="!navMenu.children" :data="navMenu" :key="navMenu.id" @click="addTabs(navMenu)" :index="navMenu.path">
        <i :class="navMenu.icon"></i>
        <template  v-slot:title><span >{{navMenu.title}}</span></template>
      </el-menu-item>
      <el-submenu v-if="navMenu.children" :data="navMenu"  :key="navMenu.id" :index="JSON.stringify(navMenu)+'/'+Math.random() * 9">
        <template  v-slot:title >
          <i :class="navMenu.icon"></i>
          <span>{{navMenu.title}}</span>
        </template>
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
		</template>
	</div>
</template>

<script>
  import {ElSubmenu,ElMenuItem} from 'element-plus'
  import eventBus from "vue3-bus";
  import { useStore }  from "vuex"
  import {defineComponent, ref} from 'vue'
  export default defineComponent({
    name: 'NavMenu',
   components:{
      ElSubmenu,
      ElMenuItem
    },
    props: {
      navMenus: { // 菜单数据
        type: Array,
        required: true,
        default(){
          return []
        }
      }
    },
    setup(props) {
      let isCollapse = ref<Boolean>(true);
      let store = useStore();
      function collapse(e){
        isCollapse = e
      }
      eventBus.on("isCollapse", collapse)

      const  addTabs = (item) =>{
        store.commit("addTabs",item)
      }
      return{
        isCollapse,
        addTabs
      }

    }
	})
</script>

<style>
</style>
